<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html 
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  	<title> - How The Snow - </title>
    
  	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  	<link type="text/css" rel="stylesheet" href="/stylesheets/css/blueprint/screen.css" media="screen, projection" />
  	<link type="text/css" rel="stylesheet" href="/stylesheets/css/blueprint/print.css" media="print" />
  	<!--[if IE]><link rel="stylesheet" href="/stylesheets/css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
  	<link type="text/css" rel="stylesheet" href="/stylesheets/css/base.css" />		
	<link type="text/css" href="stylesheets/css/cupertino/jquery-ui-1.8.17.custom.css" rel="stylesheet" />	
	<script type="text/javascript" src="stylesheets/js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="stylesheets/js/jquery-ui-1.8.17.custom.min.js"></script>
	<script>
	
	// ---------------- DATA --------------------------------------------------------------------------------------------
	var commentaires_json = "[{\"pseudo\" : \"Anonymous\", \"date\" : \"11/02/2012 13:42\", \"note_station\" : 1.8, \"evals_perso\" : [{\"eval_perso\" : \"Verglas\"},{\"eval_perso\" : \"Neige dur\"}], \"comment\" : \"WE ARE ANONYMOUS. WE ARE LEGION.\"},{\"pseudo\" : \"Anonymous\", \"date\" : \"11/02/2012 12:42\", \"note_station\" : 1, \"evals_perso\" : [{\"eval_perso\" : \"Verglas\"}], \"comment\" : \"WAHOOUUU !!!\"},{\"pseudo\" : \"Michael\", \"date\" : \"11/02/2012 11:42\", \"note_station\" : 3.2, \"evals_perso\" : [{\"eval_perso\" : \"Verglas\"},{\"eval_perso\" : \"Neige dur\"}], \"comment\" : \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis molestie diam, non eleifend enim tincidunt non. Nam ac est eu neque pulvinar accumsan. Integer laoreet dolor vel est rhoncus sollicitudin. Etiam pulvinar sapien a tellus porta eu semper sem consequat. Integer quis eros porta lorem aliquet consequat. Integer eros eros, fermentum sed consectetur sed, ornare nec eros. Duis at pharetra ligula.\"}]";
	var commentaires = eval("(" + commentaires_json + ")");
	// ---------------- DATA --------------------------------------------------------------------------------------------
	
	function populateComments(json_data) {
		var comment = "";
		for(var i = 0; i < json_data.length; ++i) {
			comment = "<fieldset class=\"ui-widget ui-widget-content ui-corner-all\">"
+"                    	<div class=\"span-12 last\">"
+"                            <div class=\"span-6\">"
+"                                <label id=\"name_comment\" style=\"font-style:italic; font-size:15px;\">"+json_data[i]["pseudo"]+"</label>"
+"                            </div>"
+"                            <div class=\"span-6 last\">"
+"                                    le <label id=\"date_comment\" style=\"font-size:10px;\">"+json_data[i]["date"]+"</label>."
+"                            </div>"
+"                        </div>"
+"                        <br />"
+"                        <br />"
+"                        <div class=\"span-12 last\">"
+"                        	<div class=\"span-8\">"
+"                            	<label>Evaluation personnelle de la station : </label>"
+"                            </div>"
+"                            <div class=\"span-2 last\">"
+"                            	<label id=\"note_comment\" style=\"color:#F90;\">"+json_data[i]["note_station"]+"</label>/4"
+"                            </div>"
+"                        </div> "
+"                        <br />"
+"                        <div class=\"span-12 last\">"
+"							<div class=\"span-8\">"
+"                            	<label>Observations : </label>"
+"                          </div>";
			for(var j  =0; j < json_data[i]["evals_perso"].length; ++j) {
				comment += "<div class=\"span-2 last\">"
+"                            	<label style=\"font-style:italic;\">"+json_data[i]["evals_perso"][j]["eval_perso"]+"</label>"
+"                          </div>"
			}
			comment += "</div>"
+"                        <br />"
+"                        <br />"
+"                        <br />"
+"                        <div class=\"span-20 last\">"
+"                        	<div class=\"span-1\">"
+"                            	<label style=\"font-size:14px;\">\"</label>"
+"                            </div>"
+"                            <div class=\"span-18 last\">"
+"                            	<label id=\"comment\" style=\"font-style:italic;\">"+json_data[i]["comment"]+"</label>"
+"                            </div>"
+"                        	<div class=\"span-1\">"
+"                            	<label style=\"font-size:14px;\">\"</label>"
+"                            </div>"
+"                        </div>"
+"                	</fieldset>";
					
			$("#div_comments").prepend(comment);
		}
	}
	
	$(function() {
		populateComments(commentaires);
		
		$("#tab_stations").tabs();
		
		$("#do_add_comment").button();
		$( "#slider" ).slider({
			value:2,
			min: 0,
			max: 4,
			step: 0.1,
			slide: function( event, ui ) {
				$( "#eval" ).val(ui.value );
				
				if(ui.value <= 1.3) {
					$("#eval").attr("style", "font-weight:bold; color:#FF0000;");
					if(ui.value <= 0.5) {
						$("#com_eval").html("Très mauvais");
					} else $("#com_eval").html("Mauvais");
				}
				else if(ui.value > 1.3 && ui.value < 2.6) {
					$("#eval").attr("style", "font-weight:bold; color:#FF9900;");
					$("#com_eval").html("Moyen");
				}
				if(ui.value >= 2.6) {
					$("#eval").attr("style", "font-weight:bold; color:#00FF00;");
					if(ui.value >= 3.5) {
						$("#com_eval").html("Très bon");
					} else $("#com_eval").html("Bon");
				}
				
			}
		});
		$( "#eval" ).val($( "#slider" ).slider( "value" ) );
		$( "#checkbox" ).buttonset();
		
		$( "#dialog:ui-dialog" ).dialog( "destroy" );
				
		$( "#dialogAddComment" ).dialog({
			autoOpen: false,
			height: 500,
			width: 850,
			modal: true,
			buttons: {
				"Ajouter le commentaire": function() {
					addComment();
					$( this ).dialog("close");
				},
				"Annuler": function() {
					$( this ).dialog("close");
				}
			},
			close: function() {
				razDialog();
			}
		});

		// Dialog	
		$("#add_comment")
			.button()
			.click(function() {
				$("#dialogAddComment").dialog("open");
			});
			
		$("#pseudo").click(function () {
			 $("#pseudo").val("");
		});
		
		$( "#accordion1" ).accordion({ autoHeight: false });
		$( "#accordion2" ).accordion({ autoHeight: false });
		$( "#accordion3" ).accordion({ autoHeight: false });
		$( "#accordion4" ).accordion({ autoHeight: false });
		$( "#accordion5" ).accordion({ autoHeight: false });
		
		$( "#maj-button" ).button({
			text: false,
			icons: {
				primary: "ui-icon-circle-plus"
			}
		}).click(function() {
			$( "#maj-button" ).hide();
			$( "#update-button" ).show();
			maj_action();
		});
		$( "#update-button" ).button({
			text: false,
			icons: {
				primary: "ui-icon-circle-check"
			}
		}).click(function() {
			$( "#maj-button" ).show();
			$( "#update-button" ).hide();
			update_action();
		}).hide();
	});
	
	function razDialog() {
		$("#pseudo").val("Anonymous");
		$("#eval").val(2).attr("style", "font-weight:bold; color:#FF9900;");;
		$("#slider").slider( "value" , 2 );
		$("#com_eval").html("Moyen");
		alert($("#checkbox").html());
		//Ne marche pas ... >_<
		$("#checkbox label").each(function(index) {
			$(this).attr("aria-pressed", "false");
		});
		$("#comment_libre").val("");
	}
	
	function addComment() {
		var new_comment_data_checkbox = "[{\"eval_perso\" : \"Verglas\"},{\"eval_perso\" : \"Neige dur\"}]"
		$("#checkbox input").each(function(index) {
			if($(this).attr("checked") == true)
				new_comment_data_checkbox += "{\"eval_perso\" : \""+$(this).val()+"\"},";
		});
		new_comment_data_checkbox = new_comment_data_checkbox.substring(0, new_comment_data_checkbox.length -1);
		new_comment_data_checkbox += "]";
		
		var new_comment_data = "{\"pseudo\" : \""+$("#pseudo").val()+"\", \"date\" : \""+new Date()+"\", \"note_station\" : "+$("#eval").val()+", \"evals_perso\" : "+new_comment_data_checkbox+", \"comment\" : \""+$("#comment_libre").val()+"\"}";
		alert(new_comment_data);
		
		populateComments(eval("(" + "["+new_comment_data+"]" + ")"));
	}
	
	/*
	*	Implémentation moche mais beaucoup plus rapide a faire qu'avec les .each() et différents selecteurs css jQuery
	*/
	function maj_action()
	{
		$("#couv_neige_enbas").hide();
		$("#input_couv_neige_enbas").show();
		
		$("#couv_neige_enhaut").hide();
		$("#input_couv_neige_enhaut").show();
		
		$("#temp_bas_piste").hide();
		$("#input_temp_bas_piste").show();
		
		$("#temp_haut_piste").hide();
		$("#input_temp_haut_piste").show();
		
		$("#nb_remontee_ouverte").hide();
		$("#input_nb_remontee_ouverte").show();
		
		$("#nb_remontee_total").hide();
		$("#input_nb_remontee_total").show();
		
		$("#nb_piste_verte_ouverte").hide();
		$("#input_nb_piste_verte_ouverte").show();
		
		$("#nb_piste_verte_total").hide();
		$("#input_nb_piste_verte_total").show();
		
		$("#nb_piste_bleue_ouverte").hide();
		$("#input_nb_piste_bleue_ouverte").show();
		
		$("#nb_piste_bleue_total").hide();
		$("#input_nb_piste_bleue_total").show();
		
		$("#nb_piste_rouge_ouverte").hide();
		$("#input_nb_piste_rouge_ouverte").show();
		
		$("#nb_piste_rouge_total").hide();
		$("#input_nb_piste_rouge_total").show();
		
		$("#nb_piste_noire_ouverte").hide();
		$("#input_nb_piste_noire_ouverte").show();
		
		$("#nb_piste_noire_total").hide();
		$("#input_nb_piste_noire_total").show();
	}
	
	/*
	*	Implémentation moche mais beaucoup plus rapide a faire qu'avec les .each() et différents selecteurs css jQuery
	*/
	function update_action()
	{
		var json_data = {"couv_neige_enbas" : $("#input_couv_neige_enbas").val(), "couv_neige_enhaut" : $("#input_couv_neige_enhaut").val(), "temp_bas_piste" : $("#input_temp_bas_piste").val(), "temp_haut_piste" : $("#input_temp_haut_piste").val(), "nb_remontee_ouverte" : $("#input_nb_remontee_ouverte").val(), "nb_remontee_total" : $("#input_nb_remontee_total").val(), "nb_piste_verte_ouverte" : $("#input_nb_piste_verte_ouverte").val(), "nb_piste_verte_total" : $("#input_nb_piste_verte_total").val(), "nb_piste_bleue_ouverte" : $("#input_nb_piste_bleue_ouverte").val(), "nb_piste_bleue_total" : $("#input_nb_piste_bleue_total").val(), "nb_piste_rouge_ouverte" : $("#input_nb_piste_rouge_ouverte").val(), "nb_piste_rouge_total": $("#input_nb_piste_rouge_total").val(),"nb_piste_noire_ouverte": $("#input_nb_piste_noire_ouverte").val(),"nb_piste_noire_total": $("#input_nb_piste_noire_total").val() };
		
		$("#couv_neige_enbas").html($("#input_couv_neige_enbas").val()).show();
		$("#input_couv_neige_enbas").hide();
		
		$("#couv_neige_enhaut").html($("#input_couv_neige_enhaut").val()).show();
		$("#input_couv_neige_enhaut").hide();
		
		$("#temp_bas_piste").html($("#input_temp_bas_piste").val()).show();
		$("#input_temp_bas_piste").hide();
		
		$("#temp_haut_piste").html($("#input_temp_haut_piste").val()).show();
		$("#input_temp_haut_piste").hide();
		
		$("#nb_remontee_ouverte").html($("#input_nb_remontee_ouverte").val()).show();
		$("#input_nb_remontee_ouverte").hide();
		
		$("#nb_remontee_total").html($("#input_nb_remontee_total").val()).show();
		$("#input_nb_remontee_total").hide();
		
		$("#nb_piste_verte_ouverte").html($("#input_nb_piste_verte_ouverte").val()).show();
		$("#input_nb_piste_verte_ouverte").hide();
		
		$("#nb_piste_verte_total").html($("#input_nb_piste_verte_total").val()).show();
		$("#input_nb_piste_verte_total").hide();
		
		$("#nb_piste_bleue_ouverte").html($("#input_nb_piste_bleue_ouverte").val()).show();
		$("#input_nb_piste_bleue_ouverte").hide();
		
		$("#nb_piste_bleue_total").html($("#input_nb_piste_bleue_total").val()).show();
		$("#input_nb_piste_bleue_total").hide();
		
		$("#nb_piste_rouge_ouverte").html($("#input_nb_piste_rouge_ouverte").val()).show();
		$("#input_nb_piste_rouge_ouverte").hide();
		
		$("#nb_piste_rouge_total").html($("#input_nb_piste_rouge_total").val()).show();
		$("#input_nb_piste_rouge_total").hide();
		
		$("#nb_piste_noire_ouverte").html($("#input_nb_piste_noire_ouverte").val()).show();
		$("#input_nb_piste_noire_ouverte").hide();
		
		$("#nb_piste_noire_total").html($("#input_nb_piste_noire_total").val()).show();
		$("#input_nb_piste_noire_total").hide();
		
		$("#derniere_maj").html("01/01/2013 11:11");
	}
	
	</script>
    <style type="txt/css">
		.Italic { font-style:italic; }
		.Green { color=#00FF00; font-weight:bold; }
		.Orange { color=#FF9900; font-weight:bold; }
		.Red { color=#F00000; font-weight:bold; }
		input { font-weight:bold; }
	</style>
  	
<body style="background: #eeeeee;">
	
	<div class="container">
		<!-- DIALOG -->
    	<div id="dialogAddComment" title="Ajouter un commentaire">
			<div class="span-18">
                <div class="span-8 last" style="margin: 1em;">
                    <div class="span-3">
                        <label for="pseudo">Pseudo</label>
                    </div>
                    <div class="span-5 last">
                        <input type="text" id="pseudo" name="pseudo" maxlength="14" size="15" value="Anonymous"/>
                    </div>
                </div>
                
                <div class="span-16 last" style="margin: 1em;">
                    <div class="span-3">
                        <label for="eval">Evaluation personnelle : </label>
                    </div>
                    <div class="span-3 prepend-1">
                        <input type="text" id="eval" size="4" disabled="disabled" style="font-weight:bold; color:#FF9900;" class="ui-widget ui-widget-content ui-corner-all"/><br />
                        <label id="com_eval">Moyen</label>
                    </div>
                    <div class="span-8 last">
                        <fieldset>
                        <div id="slider"></div>
                        </fieldset>
                    </div>
                </div>
                
                <div class="span-16 last" style="margin: 1em;">
                    <div class="span-3">
                        <label>Observation : </label>
                    </div>
                    <div class="span-13 last">
                        <div id="checkbox">
                            <input type="checkbox" id="checkbox1" /><label for="checkbox1">Neige molle</label>
                            <input type="checkbox" id="checkbox2" /><label for="checkbox2">Neige dur</label>
                            <input type="checkbox" id="checkbox3" /><label for="checkbox3">Verglas</label>
                        </div>

                    </div>
                </div>
                
                
                <div class="span-16 last" style="margin: 1em;">
                    <div class="span-3">
                        <label for="comment_libre" >Commentaire libre : </label>
                    </div>
                    <div class="span-13 last">
                        <textarea id="comment_libre" name="comment_libre" row="4" cols="10" style="width:450px; height:100px;"></textarea>
                    </div>
                </div>
            </div>
        </div>
		<!-- HEADER -->
		<div class="span-24 last" style="background: #1E7FCB; text-align: center;">
			<div class="span-3"></div>
			<div class="span-12 last"><h1 style="font-size: 32pt; color: #FFFFFF; margin: 15px 15px 15px 15px;">How The Snow</h1></div>
			<div class="span-22 prepend-1 append-1 last">
				<div id="nav" class="ui-widget ui-widget-content ui-corner-all" style="margin:8px;">
					<ul>
						<li><a href="index.html">Accueil</a></li>
						<li><a href="connexion.html">Connexion</a></li>
					</ul>
				</div>
			</div>
		</div>
	    	
		<!-- CONTENT -->
		<div class="span-22 prepend-1 append-1 last" style="background: #FEFEFE; text-align: center;">
        	<br />
            <br />
            <h1 style="font-size:46px;"> - Auron - </h1>
            <br />
            <br />
            
            <!-- Moyenne -->
			<div class="span-22 last" style="padding:5px;">
            	<div class="prepend-5 span-4">
                	<fieldset class="ui-widget ui-widget-content ui-corner-all">
                    	<h1><label id="note_moyenne" style="color:#0F0;">3,2</label><label style="font-weight:bold">/4</label></h1>
            		</fieldset>
                </div>
                
                <div class="span-10 last">
                	<br /><h2> Note moyenne de la station </h2>
                </div>
            </div>
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            
            <!-- Les infos -->
            <div class="span-22 last">
            	<div class="span-20">
                	<h2>Informations de la station</h2>
                </div>
                <div class="span-2 last">
                    <span id="toolbar" class="ui-widget-header ui-corner-all">
                        <button id="maj-button">Mise A Jour</button>
                        <button id="update-button">Confirmation de mise a jour</button>
                    </span>
                </div>
            </div>
            <div class="span-22 last" style="text-align: left;">
            	
            <div id="accordion1">
            	<h3><a href="#">Couverture de neige</a></h3>
                <div>
                    <div class="span-16 last">
                        <div class="span-8">
                            <label style="font-style:italic">Couverture de neige en bas des pistes : </label>
                        </div>
                        <div id="div-couv_neige_enbas" class="span-1">
                            <label id="couv_neige_enbas">2</label>
                            <input id="input_couv_neige_enbas" name="input_couv_neige_enbas" type="text" value="2" class="hide ui-widget ui-widget-content ui-corner-all" size="2"/>
                        </div>
                        <div class="span-2">
                            <label>mètres.</label>
                        </div>
                        <div class="span-2 last">
                            <img src="./static/img/icones/bas_piste.jpg"/>
                        </div>
                    </div>
                    
                    <br />
                    
                    <div class="span-16 last">
                        <div class="span-8">
                            <label style="font-style:italic">Couverture de neige en haut des pistes : </label>
                        </div>
                        <div id="div-couv_neige_enhaut" class="span-1">
                            <label id="couv_neige_enhaut">8</label>
                            <input id="input_couv_neige_enhaut" name="input_couv_neige_enhaut" type="text" value="8" class="hide ui-widget ui-widget-content ui-corner-all" size="2"/>
                        </div>
                        <div class="span-2">
                            <label>mètres.</label>
                        </div>
                        <div class="span-2 last">
                            <img src="./static/img/icones/haut_piste.jpg"/>
                        </div>
                    </div>
                </div>
            </div>
            
                <br />
                
            <div id="accordion2">
                <h3><a href="#">Température et Météo</a></h3>
                <div style="display:block;">
                    <div class="span-16 last">
                        <div class="span-4">
                            <label style="font-style:italic">En bas des pistes</label>
                        </div>
                        <div class="span-4">
                            <label>Temperature : </label>
                        </div>
                        <div class="span-1">
                            <label id="temp_bas_piste">5</label>
                            <input id="input_temp_bas_piste" name="input_temp_bas_piste" type="text" value="5" class="hide ui-widget ui-widget-content ui-corner-all" size="2"/>
                        </div>
                        <div class="span-2">
                            <label>° Celsius</label>
                        </div>
                        <div class="span-2">
                            <label>Météo : </label>
                        </div>
                        <div class="span-2 last">
                            <img src="./static/img/icones/couvert.jpg"/>
                        </div>
                    </div>
                    
                    <br />
                    
                    <div class="span-16 last">
                        <div class="span-4">
                            <label style="font-style:italic">En haut des pistes</label>
                        </div>
                        <div class="span-4">
                            <label>Temperature : </label>
                        </div>
                        <div class="span-1">
                            <label id="temp_haut_piste">-4</label>
                            <input id="input_temp_haut_piste" name="input_temp_haut_piste" type="text" value="-4" class="hide ui-widget ui-widget-content ui-corner-all" size="2"/>
                        </div>
                        <div class="span-2">
                            <label>° Celsius</label>
                        </div>
                        <div class="span-2">
                            <label>Météo : </label>
                        </div>
                        <div class="span-2 last">
                            <img src="./static/img/icones/soleil.jpg"/>
                        </div>
                    </div>
                </div>
            </div>
                
                <br />
                
            <div id="accordion3">
            	<h3><a href="#">Remontées mécaniques</a></h3>
                <div>
                    <div class="span-16 last">
                        <div class="span-8">
                            <label style="font-style:italic">Nombre de remontées ouverte : </label>
                        </div>
                        <div class="span-2">
                            <label id="nb_remontee_ouverte">18</label>
                            <input id="input_nb_remontee_ouverte" name="input_nb_remontee_ouverte" type="text" value="18" class="hide ui-widget ui-widget-content ui-corner-all" size="2"/>
                        </div>
                        <div class="span-2 last">
                            <img src="./static/img/icones/remontee.jpg"/>
                        </div>
                    </div>
                    
                	<br />
                    
                    <div class="span-16 last">
                        <div class="span-8">
                           	<label>Nombre de remontées totales : </label>
                        </div>
                        <div class="span-2 last">
                            <label id="nb_remontee_total">22</label>
                            <input id="input_nb_remontee_total" name="input_nb_remontee_total" type="text" value="22" class="hide ui-widget ui-widget-content ui-corner-all" size="2"/>
                        </div>
                    </div>
                </div>
            </div>
                
                <br />
            
            <div id="accordion4">
            	<h3><a href="#">Les pistes</a></h3>
                <div>
                    <div class="span-16 last">
                        <div class="span-8">
                            <label>Pistes vertes : </label>
                        </div>
                        <div class="span-1">
                            <label id="nb_piste_verte_ouverte">18</label>
                            <input id="input_nb_piste_verte_ouverte" name="input_nb_piste_verte_ouverte" type="text" value="18" class="hide ui-widget ui-widget-content ui-corner-all" size="2"/>
                        </div>
                        <div class="span-1">
                            <label>/</label>
                        </div>
                        <div class="span-1">
                            <label id="nb_piste_verte_total">23</label>
                            <input id="input_nb_piste_verte_total" name="input_nb_piste_verte_total" type="text" value="23" class="hide ui-widget ui-widget-content ui-corner-all" size="2"/>
                        </div>
                        <div class="span-3">
                            <label>pistes.</label>
                        </div>
                        <div class="span-2 last">
                            <img src="./static/img/icones/circle_green.png"/>
                        </div>
                    </div>
                    
                	<br />
                    
                    <div class="span-16 last">
                        <div class="span-8">
                            <label>Pistes bleues : </label>
                        </div>
                        <div class="span-1">
                            <label id="nb_piste_bleue_ouverte">27</label>
                            <input id="input_nb_piste_bleue_ouverte" name="input_nb_piste_bleue_ouverte" type="text" value="27" class="hide ui-widget ui-widget-content ui-corner-all" size="2"/>
                        </div>
                        <div class="span-1">
                            <label>/</label>
                        </div>
                        <div class="span-1">
                            <label id="nb_piste_bleue_total">33</label>
                            <input id="input_nb_piste_bleue_total" name="input_nb_piste_bleue_total" type="text" value="33" class="hide ui-widget ui-widget-content ui-corner-all" size="2"/>
                        </div>
                        <div class="span-3">
                            <label>pistes.</label>
                        </div>
                        <div class="span-2 last">
                            <img src="./static/img/icones/circle_blue.png"/>
                        </div>
                    </div>
                    
                	<br />
                    
                    <div class="span-16 last">
                        <div class="span-8">
                            <label>Pistes rouges : </label>
                        </div>
                        <div class="span-1">
                            <label id="nb_piste_rouge_ouverte">14</label>
                            <input id="input_nb_piste_rouge_ouverte" name="input_nb_piste_rouge_ouverte" type="text" value="14" class="hide ui-widget ui-widget-content ui-corner-all" size="2"/>
                        </div>
                        <div class="span-1">
                            <label>/</label>
                        </div>
                        <div class="span-1">
                            <label id="nb_piste_rouge_total">21</label>
                            <input id="input_nb_piste_rouge_total" name="input_nb_piste_rouge_total" type="text" value="21" class="hide ui-widget ui-widget-content ui-corner-all" size="2"/>
                        </div>
                        <div class="span-3">
                            <label>pistes.</label>
                        </div>
                        <div class="span-2 last">
                            <img src="./static/img/icones/circle_red.png"/>
                        </div>
                    </div>
                    
                	<br />
                    
                    <div class="span-16 last">
                        <div class="span-8">
                            <label>Pistes noires : </label>
                        </div>
                        <div class="span-1">
                            <label id="nb_piste_noire_ouverte">8</label>
                            <input id="input_nb_piste_noire_ouverte" name="input_nb_piste_noire_ouverte" type="text" value="8" class="hide ui-widget ui-widget-content ui-corner-all" size="2"/>
                        </div>
                        <div class="span-1">
                            <label>/</label>
                        </div>
                        <div class="span-1">
                            <label id="nb_piste_noire_total">13</label>
                            <input id="input_nb_piste_noire_total" name="input_nb_piste_noire_total" type="text" value="13" class="hide ui-widget ui-widget-content ui-corner-all" size="2"/>
                        </div>
                        <div class="span-3">
                            <label>pistes.</label>
                        </div>
                        <div class="span-2 last">
                            <img src="./static/img/icones/circle_black.jpg"/>
                        </div>
                    </div>
                </div>
            </div>
                
                <br />
                
            <div id="accordion5">
                <h3><a href="#">Mise à jour</a></h3>
                <div style="display:block;">
                    <div class="span-16 last">
                        <div class="span-8">
                            <label style="font-style:italic">Dernière mise à jour : </label>
                        </div>
                        <div class="span-5">
                            <label id="derniere_maj">13/02/2012 14:55</label>
                        </div>
                    </div>
                </div>
            </div>
            </div>
            
            <div class="span-22"><p></p></div>
            <div class="span-22"><p></p></div>
            <div class="span-22"><p></p></div>
            			
            <!-- Commentaires utilisateurs -->
            
            <div class="span-22 last" style="text-align: left;">
                <fieldset class="ui-widget ui-widget-content ui-corner-all">
                	<div class="span-16">
                    	<h2>Commentaires des utilisateurs</h2>
                    </div>
                	<div class="span-2 last">
                    	<button style="width:140px;" id="add_comment">Ajouter un commentaire</button>
                    </div>
                    <br />
                    
                    <div id="div_comments"></div>
            	</fieldset>
                
            </div>
            
		</div>
        
        <!-- FOOTER -->
		<div class="span-24 last" style="background: #1E7FCB; text-align: center;">
			<label>- How The Snow - Copyright 2012 - S. BRUN & M. NEZRI - </label>
		</div>
  	</div>
</body>

</html>

